import {Layout} from '../../src/Layout';
export default Layout;

import {Badge, Text} from '@react-spectrum/s2';
import docs from 'docs:@react-spectrum/s2';

export const tags = ['label', 'tag', 'chip'];
export const description = 'Displays color-categorized metadata for an object.';

# Badge

<PageDescription>{docs.exports.Badge.description}</PageDescription>

<VisualExample
  component={Badge}
  docs={docs.exports.Badge}
  props={['children', 'variant', 'size', 'fillStyle', 'overflowMode']}
  initialProps={{variant: "positive", children: "Licensed"}}
  slots={{icon: true}}
  importSource="@react-spectrum/s2"
  type="s2" />

## API

```tsx links={{Badge: '#badge', Icon: 'icons'}}
<Badge>
  <Icon />
  <Text />
</Badge>
```

### Badge

<PropTable component={docs.exports.Badge} links={docs.links} />
